<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">

		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<!-- file-input -->
		<link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
		<!-- SELECT2 -->
		<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		<!-- UNIFORM -->
		<link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		<!-- WIZARD -->
		<link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css" />
		  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		<!-- FONTS 
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<script src="../../js/common.js"></script>
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">

				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>维护商品</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- SAMPLE -->
							<form id="form_giveaway">
							
							<div class="row col-md-12">
								<div class="box border primary" style="margin-left: 20px;">
									<div class="box-title">
										<h4><i class="fa fa-bars"></i>SOURCE值赠品</h4>
									</div>
									<div class="box-body big" style="padding:10px;">


										<div class="form-group mrg-bt10-right" style="margin-top:10px;">
											<label class="control-label col-md-2"><span class="required">*</span>活动名称：</label>
											<div class="col-md-8 inline">
												<input type="text" class="form-control width-50" name="activityName" onfocus="this.select()"  placeholder="请输入活动名称" maxlength="50" />
												<input type="hidden" name="id" />
												<input type="hidden" name="oldSourceCode" />
												<span class="error-span"></span>
											</div>
										</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;">
												<label class="control-label col-md-2"><span class="required">*</span>SOURCE值：</label>
												<div class="col-md-8 inline">
													<input type="text" class="form-control width-50" name="sourceCode" onfocus="this.select()"  placeholder="请输入SOURCE值" maxlength="50" />
													<span class="error-span"></span>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" id="rangDate">
												<label class="control-label col-md-2"><span class="required">*</span>生效日期：</label>
												<div class="col-md-6 inline" style="display:inline-flex">
													<input type="text" class="form-control width-50 bootstrap-datepicker" name="startDate" style="width:110px" />-
													<input type="text" class="form-control width-50 bootstrap-datepicker" name="endDate" style="width:120px"/>
													<span class="error-span"></span>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;">
												<label class="control-label col-md-2"><span class="required">*</span>奖品：</label>
												
												<div class="col-md-2 inline" style="display:inline-flex">
													<select id="type_select" class="col-md-6 select2-offscreen"  tabindex="-1">												
														<option value="-1">请选择</option>
														<option value="Balance">成长基金</option>
														<option value="Coupon">优惠券</option>
														<option value="Goods">实物</option>
														<option value="Card">卡券</option>
													</select>
													<a href="javascript:;" class="btn width-50 " id="addPrize" style="width:110px" >增加奖品</a>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;height: 200px"  id="prizeItem">
												<label class="control-label col-md-2"></label>
												<div class="col-md-9">
													<table class="table table-bordered" id="prizeItemlist">
														<thead>
															<tr>
																<th>索引</th>
																<th style="text-align: center;">类型</th>
																<th style="text-align: center;">关联值</th>
																<th style="text-align: center;">描述</th>
																<th style="text-align: center;">概率(新客)</th>
																<th style="text-align: center;">概率(老客)</th>
																<th style="text-align: center;">总次数</th>
																<th style="text-align: center;">赠送数量</th>
																<th style="text-align: center;">操作</th>
															</tr>
														</thead>
														<tbody>
														</tbody>
													</table>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;">
												<label class="control-label col-md-2">默认奖品：</label>
												<div class="col-md-8 inline">
													<input type="text" class="form-control width-50" name="defaultIndex" placeholder="超出数量的默认奖品（请输入相应奖品的索引）"  maxlength="50" />
													<span class="error-span"></span>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;">
												<label class="control-label col-md-2">奖品数量：</label>
												<div class="col-md-8 inline">
													<input type="text" class="form-control width-50" name="giveCount" placeholder="（请输入相应奖品数量）"  maxlength="50" />
													<span class="error-span"></span>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;">
												<label class="control-label col-md-2">操作人：</label>
												<div class="col-md-8 inline">
													<input type="text" class="form-control width-50" name="handler" onfocus="this.select()"  readonly="readonly" maxlength="50" />
													<span class="error-span"></span>
												</div>
											</div>
											<div class="form-group mrg-bt10-right" style="margin-top:10px;">
												<label class="control-label col-md-2">操作时间：</label>
												<div class="col-md-8 inline">
													<input type="text" class="form-control width-50 bootstrap-datepicker" readonly="readonly" name="updateTime"  />
													<span class="error-span"></span>
												</div>
											</div>
		
								</div>
									
							  </div>
						    </div>	
							</form>
							<div class="row" style="height: 30px;">
								<div class="col-md-12" style="text-align: center;">
									<div class="box ">
										<a href="#"  class="btn btn-success config bt-submit" style="width: 100px">
											保存
										</a>
									</div>
								</div>
					           </div>	
									</div>
								</div>
										
							
							<!-- /SAMPLE -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
		</section>
		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->

		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- INPUT MASK -->
		
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
			<!-- UNIFORM -->
	<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
		<!-- DATA TABLES -->
		<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
		<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>


		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
	
        <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
        <script src="../../js/jquery-validate/jquery.validate.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>

		<script src="../../js/Sortable.min.js"></script>
		<script>
			var AddDrawPrize = function() {
			var gaform = $('#form_giveaway');
			var id,flag,index=0;
			var formValiInit=function(){
	            gaform.validate({
	                doNotHideMessage: true,
					errorClass: 'error-span',
	                errorElement: 'span',
	                rules: {                	 
	                	activityName:{
	                		required:true
	                	},                	
						sourceCode: {
	                        required: true                        
	                    },
	                    skuCode: {
	                        required: true                        
	                    }
	                },
	                highlight: function (element) { 
	                    $(element)
	                        .closest('.form-group').removeClass('has-success').addClass('has-error'); 
	                },
	
	                unhighlight: function (element) { 
	                    $(element)
	                        .closest('.form-group').removeClass('has-error'); 
	                },	
	                success: function (label) {
	                    if (label.attr("for") == "gender") { 
	                        label.closest('.form-group').removeClass('has-error').addClass('has-success');
	                        label.remove(); 
	                    } else { 
	                        label.addClass('valid') 
	                        .closest('.form-group').removeClass('has-error').addClass('has-success'); 
	                    }
	                }
				 });
			};
			
			var saveDrawPrize=function(){
				if (gaform.valid() == false)return false;			
	            var drawPrize={};
	               drawPrize.activityName=$("input[name=activityName]").val();	            
	               drawPrize.sourceCode=$("input[name=sourceCode]").val();	               
	               drawPrize.startDate=$("input[name=startDate]").val();
	               drawPrize.endDate=$("input[name=endDate]").val();
	               drawPrize.defaultIndex=$("input[name=defaultIndex]").val();
	               drawPrize.giveCount=$("input[name=giveCount]").val();
	               drawPrize.prizeItems=[];

	            $("#prizeItemlist tbody tr").each(function(index,item){
	            	var item = {};
	            	item.index= $(this).find("input[name=index]").val();
	            	item.type=$(this).find("input[name=type]").attr('type');
	            	item.relationCode = $(this).find("input[name=relationCode]").val();
	            	item.content = $(this).find("input[name=content]").val();
                    item.rateForNewCustom = $(this).find("input[name=rateForNewCustom]").val();
	            	item.rate = $(this).find("input[name=rate]").val();
	            	item.drawCount = $(this).find("input[name=drawCount]").val();
	            	item.limitCount = $(this).find("input[name=limitCount]").val();
	            	drawPrize.prizeItems.push(item);
	            })
	              
	               $.blockUI();
	               var url= App.getContextPath() + "admin/activity/saveDrawPrize.do";
	              
	               $.ajax({
						type: "post",
						url: url,
						data:$.param({drawPrize:JSON.stringify(drawPrize)}),
						async: true,
						success: function(result) {
							console.log(result);
							$.unblockUI();
							if(result.type=="error"){
								$.alert(result.content);
							}else{
								$.alert("保存成功");
								getSingleGift(drawPrize.sourceCode);
							}
						},
					 	error: function(e) {
                            console.log(e);
                            $.unblockUI();
                            $.alert("系统异常");
						}
					});
			};

	        var addPrizeItem = function(){
	        	
	        	$("#addPrize").click(function(){
	        		var type =    $("#type_select").val();
		        	if(type == -1){
		        		return false;
		        	}
		        	var typeStr =    $("#type_select").find("option:selected").text();

		        	var html = "<tr><td style=\"width:5%;\"><input class=\"form-control\" name='index' value='"+(++index)+"'/></td>"
							+"<td style=\"width:10%;\"><input class=\"form-control\"  readonly=\"readonly\" name='type'/ type='"+type+"' value='"+typeStr+"'></td>"
							+"<td style=\"width:15%;\"><input class=\"form-control\"  name='relationCode'/></td>"
							+"<td style=\"width:20%;\"><input class=\"form-control\"  name='content'/></td>"
							+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='浮点数 例：0.1' name='rateForNewCustom'/></td>"
							+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='浮点数 例：0.1' name='rate'/></td>"
							+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='整数 例：30' name='drawCount'/></td>"
							+"<td style=\"width:15%;\"><input class=\"form-control\"  placeholder='-1表示没有限制' value='-1'  name='limitCount'/></td>"
							+"<td style=\"width:20%;\"><a class=\"btn itemRule\" href=\"javascript:;\" name='operate'>编辑</a><a class=\"btn deleteItem\" href=\"javascript:;\" name='operate'>删除</a></td></tr>";
		        	$("#prizeItemlist tbody").append(html);
				    $("#prizeItem").height($("#prizeItemlist").parent().height());
	        	})
	        	
	        };
	        var delPrizeItem = function(){
	        	$(this).parent().parent().remove();
			    $("#prizeItem").height($("#prizeItemlist").parent().height());
	        }

	       
	         //获取SOURCE值赠品详情
	         var getDrawPrize=function(){
	           $.ajax({
						type: "post",
						url: App.getContextPath() + "admin/activity/getDrawPrize.do",
						async: true,
						success: function(result) {
							result=result.extra;
							if(result){
							
							    $("[name=activityName]").val(result.activityName);
							    $("[name=sourceCode]").val(result.sourceCode);
							    $("[name=handler]").val(result.handler);
							    $("[name=updateTime]").val(new Date(parseInt(result.updateTime)).format("yyyy-MM-dd hh-mm-ss"));
								$("[name=startDate]").val(new Date(parseInt(result.startDate)).format("yyyy-MM-dd"));
								$("[name=endDate]").val(new Date(parseInt(result.endDate)).format("yyyy-MM-dd"));
							    $("[name=defaultIndex]").val(result.defaultIndex);
							    $("[name=giveCount]").val(result.giveCount);
							    
							    var html="";
							    $.each(result.prizeItems,function(index,item){
							    	if(index < item.index){
							    		index = item.index;
							    	}
							    	
							    	  html += "<tr><td style=\"width:8%;\"><input class=\"form-control\" name='index'  readonly=\"readonly\" value='"+(item.index)+"'/></td>"
									+"<td style=\"width:10%;\"><input class=\"form-control\"  readonly=\"readonly\" name='type'/ type='"+item.type+"' value='"+item.typeName+"'></td>"
									+"<td style=\"width:15%;\"><input class=\"form-control\"  readonly=\"readonly\" name='relationCode'  value='"+(item.relationCode)+"'/></td>"
									+"<td style=\"width:17%;\"><input class=\"form-control\"  name='content'  value='"+(item.content)+"'/></td>"
									+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='浮点数 例：0.1' name='rateForNewCustom' value='"+(item.rateForNewCustom)+"'/></td>"
									+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='浮点数 例：0.1' name='rate' value='"+(item.rate)+"'/></td>"
									+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='整数 例：30' name='drawCount' value='"+(item.drawCount ? item.drawCount : "")+"'/></td>"
									+"<td style=\"width:15%;\"><input class=\"form-control\" placeholder='0 表示没有限制'   name='limitCount' value='"+(item.limitCount)+"'/></td>"
									+"<td style=\"width:20%;\"><a class=\"btn itemRule\" href=\"javascript:;\" name='operate'>编辑</a><a class=\"btn deleteItem\" href=\"javascript:;\" name='operate'>删除</a></td></tr>";
							    });
							    
							 	$("#prizeItemlist tbody").append(html)
							    $("#prizeItem").height($("#prizeItemlist").parent().height());
							} else {
                                $("[name=activityName]").val('');
                                $("[name=sourceCode]").val('');
                                $("[name=handler]").val('');
                                $("[name=updateTime]").val('');
                                $("[name=startDate]").val('');
                                $("[name=endDate]").val('');
                                $("[name=defaultIndex]").val('');
                                $("[name=giveCount]").val('');
                                $("#prizeItemlist tbody").html('');
                                $("#prizeItem").height($("#prizeItemlist").parent().height());
							}
					    }             					
					});
	         };
	       
			
				return {
					init: function() {
					  App.init();
					   formValiInit();
					   $.initDate($("#rangDate"),0,15);					  
					   $("input[name=startDate]").bsdatepicker("setValue",$.nowDate());
					   $(".bt-submit").click(saveDrawPrize);

						$("#type_select").select2().change();
						addPrizeItem();
						$("#prizeItemlist tbody").on('click','.deleteItem',delPrizeItem);
                        getDrawPrize();
					}
				}
			}();
			$(function() {
				$("#header").load("../head.html");
				AddDrawPrize.init();
			});
		</script>

		<!-- /JAVASCRIPTS -->
	</body>

</html>